<template>
  <div class="content">
    <div class="product-list-header">
      <div class="slot iconfont" @click="$router.go(-1)">&#xe64f;</div>
      <div class="common-search">
        <input type="text" placeholder="请输入关键词" autocomplete="off" v-model="keyword" />
      </div>
      <mt-button
        class="buttom"
        size="small"
        type="default"
        @click="keyword = ''"
        v-if="ifKeywords"
      >取消</mt-button>
      <mt-button class="buttom" size="small" type="primary" @click="search" v-else>搜索</mt-button>
    </div>
    <ul>
      <li
        @click="goClass(item.storegc_id)"
        :class="{active: item.storegc_id == storegcId}"
        v-for="(item, index) in clsName"
        :key="index"
      >
        <img :src="item.storegc_img || ''" alt />
        <!-- <img v-bind:src="item.storegc_img" alt /> -->
        <!-- :class="item.storegc_id == gc_id? active : '' -->
        <p>{{item.storegc_name}}</p>
      </li>
    </ul>
    <div
      class="content-text"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="50"
    >
      <div
        v-for="(item,index) in clsData"
        :key="index"
        class="product-info"
        v-bind:class="{ border: index % 2 == 0 }"
        @click="productClick(item)"
      >
        <!--v-lazy item.storegc_img || '' -->
        <img
          class="product-icon"
          :src="item.goods_image_url || 'https://ds.wyadmin.cn/uploads/home/store/1/1_storegc_2020080709545027901.jpg'"
        />
        <span class="product-title">{{item.goods_name}}</span>
        <div class="product-bottom">
          <span class="product-price">￥{{item.goods_price}}</span>
          <span class="product-buy">{{item.goods_salenum + item.v_salenum}}人已购买</span>
        </div>
      </div>
    </div>
    <!-- <div class="more" v-if="!is_show">没有更多了</div> -->
    <no-moren v-if="!is_show"></no-moren>
  </div>
</template>
<script>
import NoMoren from "../../NoMore";
import { getcategoodsBycate, getStoreInfo } from "../../../api/homestoredetail";
export default {
  name: "SearchClass",
  data() {
    return {
      keyword: "",
      storeId: this.$route.query.storeId || "",
      storegcId: this.$route.query.storegcId || "",
      keyword: "",
      clsData: "",
      showRightBorder: "",
      clsName: "",
      page: "0",
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      params: { page: 0, per_page: 50 },
      is_show: false,
    };
  },
   components: {
    NoMoren
  },

  created() {
    // this.getcategoodsBycate();
    this.getStoreInfo();
  },
  computed: {
    ifKeywords() {
      if (this.keywords === "") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    loadMore() {
      console.log("测试下一进入页面会不会执行一次");
      this.loading = true;
      this.params.page = ++this.params.page;
      if (this.isMore) {
        this.loading = false;
        this.getcategoodsBycate(this.storegcId);
      }else{
        // this.is_show = false;
      }
    },
    goClass(clsId) {
      // this.is_show = true;
      this.getcategoodsBycate(clsId);
    },
    productClick: function (item) {
      console.log(item.goods_id);
      this.$router.push({
        name: "HomeGoodsdetail",
        query: { goods_id: item.goods_id },
      });
    },
    getcategoodsBycate(gcId) {
      this.storegcId = gcId ? gcId : this.storegcId;
      getcategoodsBycate(
        this.storeId,
        this.storegcId,
        this.keyword,
        this.params
      ).then((res) => {
        if (res.code == 10000) {
          console.log(res.result.categoodsList);
          this.isMore = res.result.page_info.hasmore;
          this.is_show = res.result.page_info.hasmore;
          // if (res.result.page_info.hasmore) {
          //   this.isMore = true;
          //   this.is_show = true
          // } else {
          //   this.isMore = false;
          // }
          this.clsData = res.result.categoodsList;
        }
      });
    },
    getStoreInfo() {
      getStoreInfo(this.storeId).then((res) => {
        console.log(1212121)
        console.log(res.result.storegoodsclass); //storegc_id
        this.clsName = res.result.storegoodsclass;
      });
    },
    search() {
      // keyword
      if (this.keyword) {
      }
      this.$router.push({
        name: "HomeStoreGoodslist",
        query: { id: this.$route.query.storeId, keyword: this.keyword },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.active {
  color: #3c7c45;
}
.product-list-header {
  display: flex;
  height: 2rem;
  padding: 0.5rem 0.25rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  .slot {
    width: 1.6rem;
    font-size: 0.8rem;
  }
}
.common-search {
  flex: 1;
  padding: 0.4rem 0.6rem 0.4rem 0;
}
.common-search input {
  box-sizing: border-box;
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  border-radius: 0.2rem;
  background: #ededed;
  background-size: 0.55rem;
  font-size: 0.7rem;
  color: #999;
  border: 0;
  padding-left: 0.5rem;
}
.buttom {
  width: 2.6rem;
  height: 1.6rem;
  // color: red;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  margin-top: 0.25rem;
}
ul li {
  width: 25%;
  align-self: center;
  font-size: 0.6rem;
  color: #101010;
  text-align: center;
  margin-top: 0.75rem;
}
ul li img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
ul li p {
  margin-top: 0.5rem;
}

.border {
  border-right: 1px solid #f5f5f5;
}
.content-text {
  width: 100%;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #f5f5f5;
  background-color: #ffffff;
  padding-bottom: 0.5rem;
  // margin-bottom: 2.5rem;
}
.product-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.5rem;
  justify-content: flex-end;
  border-bottom: 1px solid #f5f5f5;
  width: 50%;
  box-sizing: border-box;
  .product-icon {
    align-self: center;
    width: 100%;
    box-sizing: border-box;
  }
  .product-title {
    color: #333;
    font-size: 0.6rem;
    margin-top: 1rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .product-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    line-height: 1rem;
    .product-price {
      color: $primaryColor;
      font-size: 0.7rem;
    }
    .product-buy {
      color: #999999;
      font-size: 0.65rem;
    }
  }
}

.more {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // z-index: 123;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.6rem;
  background-color: #ffffff;
}
</style>